<?php
	require_once($_SERVER['DOCUMENT_ROOT'].'/ukkepuk/source/php/classes/dao/Lov.php'); 
?>

<html>
<head>
	<title>Kids Wizard</title>
	<script src="/ukkepuk/source/html/scripts/jquery-1.7.1.js"></script>
	<script src="/ukkepuk/source/html/scripts/jquery-ui-1.8.16.custom.min.js"></script>
	<script src="/ukkepuk/source/html/scripts/topmenu.js"></script>
		
	<style type="text/css" media="all">
		@import url("/ukkepuk/source/html/css/topmenu.css");
	</style>
	<link type="text/css" href="/ukkepuk/source/html/css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
	
	<style>
		form {
			border: 1px solid #000;
		}
		table tr td.label {
			font-size: 18px;
			font-family: Arial;
		}
		
		input {
			border-bottom: 1px solid #333;
			border-top: none;
			border-left: none;
			border-right: none;
			
		}
		
		input[placeholder] {
			font-style: italic;
			color: #CECECE;
		}
		
		input {
			font-style: normal;
		}
	</style>
	<script>
		var comTypes = <?php Lov::getJson(Lov::getCommunicationTypes()); ?>;
		var relTypes = <?php Lov::getJson(Lov::getRelationTypes()); ?>;
	
		$(function(){
			$('#tabs').tabs();
		});
		
		function addFamily(){
			//get all tr tags that has name famX (do not include famX_comY
			var famId = $.grep($("#family tr"), function (value) {var trName2 = $(value).attr("name"); return trName2.indexOf("fam") == 0 && trName2.indexOf("com") < 0;});
			//count the famX tags
			var famIdSize = $(famId).size();
			//create a new family line and apply the correct ID's
			$('<tr id="fam_row" name="fam'+famIdSize+'"><td> ' + getRelationsList('famType'+famIdSize) +'</td><td><input type="text" placeholder="naam" name="famName'+famIdSize+'"/></td><td><input type="text" placeholder="voornaam" name="famFirstName'+famIdSize+'"/></td><td><a href="javascript:void(0)" onClick="addCommunication(this)">C</a></td><td><a href="javascript:void(0)" onClick="remove(this)">X</a></td></tr>').appendTo('#family');
		}
		
		function addCommunication(link){
			getCommunicationList();
			
			//get the name of the tr tag that includes the link
			var trName = $($(link).parents("tr")[0]).attr("name");
			
			//check if trName is defined, for communication on kid level it's undefined.
			var famIdArray = null;
			if(trName) {
				//get all tr's that begin with this name
				var famIdArray = $.grep($("#family tr"), function (value){var trName2 = $(value).attr("name"); return trName2.indexOf(trName) == 0;});
				famIdSize = $(famIdArray).size() - 1;
			}else {
				famIdArray = $.grep($("#kid tr"), function (value){
					var trName2 = $(value).attr("name"); 
					if(!trName2) return false;
					return trName2.indexOf("com") == 0;});
				trName = "";
				famIdSize = $(famIdArray).size();
			}
			
			//create a new communication line with correct ID's applied
			$('<tr name="'+trName+'com'+ famIdSize+'"><td></td><td>' + getCommunicationList(trName+'comType'+ famIdSize) + '</td><td><input type="text" name="'+trName + 'com'+ famIdSize +'"/></td><td><a href="javascript:void(0)" onClick="remove(this)">X</a></td></tr>').insertAfter($(link).parents("tr")[0]);
		}
		
		function remove(link) {
			$($(link).parents("tr")[0]).hide(); //hide line instead of remove, otherwise, can conflict with id's. also clean data
			//TOD, remove communication, hide current line, of remove family, also remove all communication
		}
		
		function getCommunicationList(listname){
			var result = "<select name=\"" + listname + "\">";
			$.each(comTypes, function(i, item) {
				result += "<option value=\""+item.id+"\">"+item.type+"</option>";
			});
			result += "</select>";
			
			return result;
		}

		function getRelationsList(listname){
			var result = "<select name=\"" + listname + "\">";
			$.each(relTypes, function(i, item) {
				result += "<option value=\""+item.id+"\">"+item.type+"</option>";
			});
			result += "</select>";
			
			return result;
		}

		
	</script>
</head>
<body>

	<table>
		<tr>
			<td>
				<?php require_once($_SERVER['DOCUMENT_ROOT'].'/ukkepuk/source/php/panels/topmenu.php'); ?>
			</td>
		</tr>
		<tr>
			<td>
				<div class="content">
					<form method="post" action="save_kid.php" enctype="multipart/form-data">
						<table id="kid">
							<tr>
								<td class="label">Naam: </td>
								<td><input name="name" type="text"/></td>
							</tr>
							<tr>
								<td class="label">Voornaam: </td>
								<td><input name="firstName" type="text"/></td>
							</tr>
							<tr>
								<td class="label">Foto: </td>
								<td><input name="photo" type="file" /></td>
							</tr>

							<tr>
								<td colspan="2">
									<div id="tabs">
										<ul>
											<li><a href="#tabs-1">Nieuw Adres</a></li>
											<li><a href="#tabs-2">Opzoeken</a></li>
										</ul>
										<div id="tabs-1">
											<table>
												<tr>
													<td class="label">Straat </td>
													<td><input type="text" name="street"/></td>
												</tr>
												<tr>
													<td class="label">Nummer </td>
													<td><input type="text" name="number"/></td>
												</tr>
												<tr>
													<td class="label">Postcode </td>
													<td><input type="text" name="postal"/></td>
												</tr>
												<tr>
													<td class="label">Gemeente </td>
													<td><input type="text" name="city"/></td>
												</tr>

											</table>
										</div>
										<div id="tabs-2">
											<table>
												<tr>
													<td class="label">Referentie: </td>
													<td>... <input type="button" name="searchKid" value="zoek"/></td>
												</tr>
											</table>
										</div>
									</div>
								</td>
							</tr>
							
							<tr>
								<td></td>
								<td><a href="javascript:void(0)" onClick="addFamily()">Family</a><a href="javascript:void(0)" onClick="addCommunication(this)">Communicatie</a></td>
							</tr>
							<tr>
								<td colspan="2">
									<table id="family">
										
									</table>
								</td>
							</tr>
							<tr>
								<td></td>
								<td><input type="submit"/></td>
							</tr>
							
						</table>
					</form>
				</div>
			</td>
		</tr>
	</table>
	
</body>
<html>